<template>
  <div class="box">
    <div class="header">
      <van-nav-bar @click-left="$router.push('/kind')">
        <template #left>
          <!-- 返回 -->
          <van-icon name="arrow-left" size="20" color="black" />
        </template>
        <template #right>
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @cancel="onCancel"
            autofocus
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <!-- 瀑布流数据切换 -->
      <ul :class="isShow ? 'kindlist1' : 'kindlist2'">
        <li
          v-for="item in kindlist"
          :key="item.proid"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" alt="" width="100%" />
          <div>
            <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
            <p>￥{{ item.originprice }}</p>
          </div>
        </li>
        <!-- 多列单列 -->
        <div class="toggle" @click="isShow = !isShow">
          <van-icon name="apps-o" v-if="isShow" />
          <van-icon name="bars" v-else />
        </div>
      </ul>
      <div class="toTop" v-if="scrollTop > 1000" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>

<script>
import { doSearch } from "../api/kind";
import Vue from "vue";
import {
  Toast,
  NavBar,
  Search,
  /*  CountDown, */
} from "vant";
Vue.use(Toast);
Vue.use(NavBar);
Vue.use(Search);
export default {
  data() {
    return {
      kindlist: [],
      value: "",
      scrollTop: 0,
      timer: null,
      isShow: true,
    };
  },
  created() {
    console.log(111);
    console.log(this.value);

    this.value = this.$route.params.keyword;
    doSearch({ keyword: this.$route.params.keyword }).then((res) => {
      console.log(res);
      this.kindlist = res.data.data;
    });
  },
  methods: {
    onCancel() {
      Toast("取消");
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
      //this.$router.push({path:"/detail",params:{proid}})
    },
    scrollUp() {
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTop() {
      //clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.kindlist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.kindlist1 li {
  width: 48%;
}
.kindlist1 li div p {
  color: red;
  font-size: 0.2rem;
  font-weight: bold;
}
.kindlist2 li {
  display: flex;
}
.kindlist2 li img {
  width: 30%;
  height: 0.8rem;
}
.kindlist2 li div {
  flex: 1;
}
.kindlist2 li div p {
  color: red;
  font-size: 0.2rem;
  font-weight: bold;
}
.toggle {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 0.5rem;
  right: 0.1rem;
  text-align: center;
  line-height: 0.3rem;
}
.toTop {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.1rem;
  text-align: center;
  line-height: 0.3rem;
}
</style>